<template>
  <div>
    <button @click="exportExcel(1000)">导出 Excel在1000左右</button>
    <br />
    <button @click="exportExcel(10000)">导出 Excel在1W左右</button>
    <br />
    <button @click="exportExcel(100000)">导出 Excel在10W左右</button>
    <hr />
    以下使用vsc格式试试呢<br />
    <button @click="handleExport(100000)">导出 Excel在10W左右</button><br />
    <button @click="handleExport(10000)">导出 Excel在1W左右</button><br />
    <button @click="handleExport(1000)">导出 Excel在1000左右</button>
    <p v-if="exportStatus === 'processing'">正在生成文件...</p>
    <p v-if="exportStatus === 'success'" style="color: green">导出成功！</p>
    <p v-if="exportStatus === 'error'" style="color: red">导出失败</p>

    <div class="progress-container" v-if="isProcessing">
      <label>导出进度:</label>
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: progress + '%' }"></div>
        <div class="progress-text">{{ progress }}%</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { exportData } from './export'
import { exportExcel2 } from '@/utils/common'

const exportStatus = ref('')
const isProcessing = ref(false)
const progress = ref(0)
const statusMessage = ref('')
const statusType = ref('')

const initalColumns = [
  {
    title: '名字',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
]

const handleExport = (num: number) => {
  exportExcel2(initalColumns, exportData(num), '导出测试')
}

const exportExcel = (num: number) => {
  isProcessing.value = true
  progress.value = 0
  statusMessage.value = '正在启动导出进程...'
  statusType.value = 'processing'

  // 创建 Web Worker
  const worker = new Worker(new URL('@/workers/fen_kuai_excel.js', import.meta.url), {
    type: 'module',
  })

  worker.postMessage({
    data: exportData(num),
    fileName: '用户数据.xlsx',
  })

  worker.onmessage = (e) => {
    if (e.data.status === 'progress') {
      progress.value = e.data.progress
      statusMessage.value = `正在导出: ${e.data.progress}%`
    } else if (e.data.status === 'success') {
      // 从ArrayBuffer重建Uint8Array
      const uint8Array = new Uint8Array(e.data.arrayBuffer)

      // 创建Blob并下载
      const blob = new Blob([uint8Array], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      })

      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = e.data.fileName
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

      isProcessing.value = false
      statusMessage.value = '导出成功！文件已下载'
      statusType.value = 'success'
      worker.terminate()
    } else if (e.data.status === 'error') {
      console.error('导出失败:', e.data.error)
      isProcessing.value = false
      statusMessage.value = `导出失败: ${e.data.error}`
      statusType.value = 'error'
      worker.terminate()
    }
  }

  worker.onerror = (error) => {
    console.error('Worker 错误:', error)
    exportStatus.value = 'error'
    worker.terminate()
  }
}
</script>
<style>
.progress-container {
  margin-top: 20px;
}

.progress-bar {
  height: 25px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  border-radius: 12px;
  width: 0%;
  transition: width 0.5s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
</style>
